<template>
  <div class="Big-box">
    <Header title="动火方案"></Header>
    <van-cell-group>
      <van-field
        label="方案名称:"
        class="top1"
        type="text"
        autosize
        rows="1"
        v-model="detailData.name"
        readonly
      />
      <van-cell icon="description" :title="fileTitle" @click="downFile" />
      <van-divider
        dashed
        :style="{
          color: '#1989fa',
          borderColor: '#1989fa',
          padding: '0',
          margin: '0',
        }"
      ></van-divider>

      <van-field
        label="动火申请单位:"
        type="textarea"
        autosize
        rows="1"
        :value="detailData.hotApplyUnit"
        readonly
      />
      <!-- <van-field label="动火作业之间:" readonly>
        <template #input>
          <span
            >{{
              detailData.hotWorkStartTime | dateFormat("YYYY-MM-DD HH:mm:ss")
            }}
            至
            {{
              detailData.hotWorkEndTime | dateFormat("YYYY-MM-DD HH:mm:ss")
            }}</span
          >
        </template>
      </van-field> -->

      <van-field
        label="基层战场(作业区)度责人:"
        type="textarea"
        autosize
        rows="1"
        :value="detailData.workAdminUserName"
        readonly
      />
      <van-field
        label="动火作业级别:"
        type="textarea"
        autosize
        rows="1"
        :value="detailData.hotLevel"
        readonly
      />
      <van-field
        label="动火作业地点:"
        type="text"
        :value="detailData.hotPlace"
        readonly
      />
      <van-field
        label="动火作业单位监护人	:"
        type="text"
        :value="detailData.hotWorkUnitGuardian"
        readonly
      />
      <van-field
        label="动火作业单位负责人:"
        type="textarea"
        autosize
        rows="1"
        :value="detailData.hotWorkUnitAdmin"
        readonly
      />
      <van-field
        label="动火作业内容及目的:"
        type="textarea"
        autosize
        rows="1"
        :value="detailData.hotContent"
        readonly
      />
      <van-field
        label=""
        value="动火作业部位与周围油气流程及置换隔断示意图:"
        readonly
      />
      <div class="van-cell__label" style="padding: 10px 16px; background: #fff">
        <p>
          <!-- :src="item | imgPath" -->
          <van-image
            v-for="(item, index) in otmpImgArr"
            width="100"
            height="100"
            @click="viewImg($event, item, index)"
          />
        </p>
      </div>

      <van-field
        label="动火作业技术措施及现场施工组织"
        type="textarea"
        autosize
        rows="1"
        :value="detailData.measure"
        readonly
      />
    </van-cell-group>

    <van-collapse v-model="activeNames" @change="onChange">
      <van-collapse-item name="1" toggle>
        <template #title>
          <div>
            {{ title }}
          </div>
        </template>

        <van-steps direction="vertical" :active="detailData.nextGroup - 1">
          <van-step v-for="(item, index) in stepsList" :key="index">
            <h3 v-if="index == 1">动火作业单位</h3>
            <p
              v-if="index == 1"
              v-for="(i, s) in item"
              :class="i.approvalStatus == 0 ? 'a' : 'b'"
            >
              <span>{{ i.userInfo.username }} </span>
            </p>

            <h3 v-if="index == 2">作业区域所在基层单位</h3>
            <p
              v-if="index == 2"
              v-for="(i, s) in item"
              :class="i.approvalStatus == 0 ? 'a' : 'b'"
            >
              <span>{{ i.userInfo.username }} </span>
            </p>

            <h3 v-if="index == 3">二级单位业务主管部门</h3>
            <van-radio-group
              v-model="radio"
              v-if="index == 3"
              v-for="(i, s) in item"
              :class="i.approvalStatus == 0 ? 'a' : 'b'"
            >
              <p @click="onChange1(i.id)">
                <van-radio
                  :disabled="
                    detailData.nextGroup - 1 === 2 &&
                    i.approvalStatus == 0 &&
                    i.approvalUserId == geUserId
                      ? false
                      : true
                  "
                  name="1"
                  v-if="s == 0"
                >
                  生产调度运行部门:{{ i.userInfo.username }}</van-radio
                >
              </p>
              <p @click="onChange1(i.id)">
                <van-radio
                  :disabled="
                    detailData.nextGroup - 1 === 2 &&
                    i.approvalStatus == 0 &&
                    i.approvalUserId == geUserId
                      ? false
                      : true
                  "
                  name="2"
                  v-if="s == 1"
                >
                  资产设施管理部门:{{ i.userInfo.username }}</van-radio
                >
              </p>
              <p @click="onChange1(i.id)">
                <van-radio
                  :disabled="
                    detailData.nextGroup - 1 === 2 &&
                    i.approvalStatus == 0 &&
                    i.approvalUserId == geUserId
                      ? false
                      : true
                  "
                  name="3"
                  v-if="s == 2"
                >
                  安全监管部门:{{ i.userInfo.username }}</van-radio
                >
              </p>
            </van-radio-group>

            <h3 v-if="index == 4">二级单位主管领导</h3>
            <p
              v-if="index == 4"
              v-for="(i, s) in item"
              :class="i.approvalStatus == 0 ? 'a' : 'b'"
            >
              <span>{{ i.userInfo.username }} </span>
            </p>

            <h3 v-if="index == 5">公司部门业务主管</h3>
            <van-radio-group
              v-model="radio1"
              v-if="index == 5"
              v-for="(i, s) in item"
              :class="i.approvalStatus == 0 ? 'a' : 'b'"
            >
              <p>
                <van-radio
                  :disabled="
                    detailData.nextGroup - 1 === 4 &&
                    i.approvalStatus == 0 &&
                    i.approvalUserId == geUserId
                      ? false
                      : true
                  "
                  name="1"
                  v-if="s == 0"
                >
                  生产调度运行部门:{{ i.userInfo.username }}
                </van-radio>
              </p>
              <p>
                <van-radio
                  :disabled="
                    detailData.nextGroup - 1 === 4 &&
                    i.approvalStatus == 0 &&
                    i.approvalUserId == geUserId
                      ? false
                      : true
                  "
                  name="2"
                  v-if="s == 1"
                >
                  资产设施管理部门:{{ i.userInfo.username }}</van-radio
                >
              </p>
              <p>
                <van-radio
                  :disabled="
                    detailData.nextGroup - 1 === 4 &&
                    i.approvalStatus == 0 &&
                    i.approvalUserId == geUserId
                      ? false
                      : true
                  "
                  name="3"
                  v-if="s == 2"
                >
                  安全监管部门:{{ i.userInfo.username }}</van-radio
                >
              </p>
            </van-radio-group>

            <h3 v-if="index == 6">资产设施管理部门负责人</h3>
            <p
              v-if="index == 6"
              v-for="(i, s) in item"
              :class="i.approvalStatus == 0 ? 'a' : 'b'"
            >
              <span>{{ i.userInfo.username }} </span>
            </p>
          </van-step>
        </van-steps>
      </van-collapse-item>
    </van-collapse>
    <!-- 签字 -->

    <div
      class="fcc determine"
      v-if="isComfBtn && detailData.confirmStatus != 1"
    >
      <van-field label="审批意见:" type="textarea" autosize rows="1">
        <template #input>
          <van-radio-group v-model="radio2" direction="horizontal">
            <van-radio name="同意">同意</van-radio>
            <van-radio name="不同意">不同意</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <div class="opinion"></div>
      <h3>请签字</h3>
      <sign-canvas
        class="sign-canvas"
        ref="signCanvasRef"
        :options="options"
        v-model="signCanvasVal"
      />

      <van-button type="info" @click="handleClear" block class="vantbutton"
        >清空</van-button
      >
      <van-button type="primary" @click="handleConfirm" block class="vantbutton"
        >确定</van-button
      >
    </div>
  </div>
</template>

<script>
import {
  hotProgramCombDetail,
  processConfirmList,
  fileUpLoad,
  processConfirm,
} from "@/api/hotworkplan";
import JSbridge from "@/utils/JSbridge";

// import { dateFormat } from "@/filter/index";
export default {
  data() {
    return {
      activeNames: ["1"],
      title: "收起",
      radio: undefined,
      radio1: undefined,
      radio2: "",
      signCanvasVal: null, //签字图片
      remark: "",
      otmpImgArr: [], //隔断示意图
      detailData: "", //详情的内容
      fileTitle: "", //文件
      stepsList: [], //审批流程
      isDown: false,
      isComfBtn: false, //隐藏签字
      confirmStatus: "",
      objId: "",
      dataID: "", //审批流程的dataI
      imgurl: "", //图片地址
      userId: localStorage.getItem("userId"),
      authToken: localStorage.getItem("authToken"),
      options: {
        isDpr: false, //是否使用dpr兼容高倍屏 [Boolean] 可选
        lastWriteSpeed: 1, //书写速度 [Number] 可选
        lastWriteWidth: 2, //下笔的宽度 [Number] 可选
        lineCap: "round", //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]    正方形线帽
        lineJoin: "bevel", //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
        canvasWidth: 350, //canvas宽高 [Number] 可选
        canvasHeight: 300, //高度  [Number] 可选
        isShowBorder: false, //是否显示边框 [可选]
        bgColor: "#fff", //背景色 [String] 可选
        borderWidth: 1, // 网格线宽度  [Number] 可选
        borderColor: "#ff787f", //网格颜色  [String] 可选
        writeWidth: 5, //基础轨迹宽度  [Number] 可选
        maxWriteWidth: 30, // 写字模式最大线宽  [Number] 可选
        minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选
        writeColor: "#101010", // 轨迹颜色  [String] 可选
        isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
        imgType: "png", //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
      },
    };
  },

  created() {
    this.getprocessConfirmList();
    this.Projectdetails();
  },
  computed: {
    //列表的id
    getid() {
      return this.$route.query.id;
    },
    // 用户的ID
    geUserId() {
      return this.userId;
    },
  },
  methods: {
    onChange(a) {
      if (a.length == 0) {
        this.title = "查看";
      } else if (a.length == 1) {
        this.title = "收起";
      }
    },
    onChange1(val) {
      this.objId = val;
    },
    //  清空
    handleClear() {
      this.$refs.signCanvasRef.canvasClear();
    },
    //确定
    handleConfirm() {
      // 请注意，这里saveAsImg()方法，返回的是 base64 的图片格式
      if (this.signCanvasVal == null) {
      } else {
        let img = this.$refs.signCanvasRef.saveAsImg();
        //签字图片处理
        // console.log("img", img);
        let blob = this.dataURLtoBlob(img);
        let file = new File([blob], new Date().getTime() + ".png"); //添加图片后缀名
        let fromData = new FormData();
        fromData.append("projectId", this.geUserId);
        fromData.append("multipartfiles", file);
        // fromData.append("approvalComments", this.remark);
        fileUpLoad(fromData).then((res) => {
          this.$refs.signCanvasRef.canvasClear();
          this.imgurl = res.data.result.toString();
          this.process(); //审批流程确定
          this.radio2 = "";
        });
      }
    },
    downFile() {
      let fileUrl =
        process.env.VUE_APP_BASE_API +
        "/welder-second/upload/" +
        this.detailData.fileUrl;
      const jsonStr = {
        url: fileUrl,
      };
      JSbridge.callHandler("goDownload", JSON.stringify(jsonStr), (res) => {
        return res;
      });
    },
    Projectdetails() {
      //详情
      hotProgramCombDetail(this.getid).then((res) => {
        if (res.data._rd == true) {
          this.detailData = res.data.result;
          this.confirmStatus = res.data.result.confirmStatus;
          //判断图片是否存在
          if (
            res.data.result.sketchMap != "" &&
            res.data.result.sketchMap != null &&
            res.data.result.sketchMap != undefined
          ) {
            let a = res.data.result.sketchMap.split(";");
            for (let item in a) {
              this.otmpImgArr.push(a[item]); //查看图片的个数
            }
          }
          if (
            res.data.result.fileUrl == "" ||
            res.data.result.fileUrl == undefined
          ) {
            this.fileTitle = "暂无文件";
            this.isDown = false;
          } else {
            this.fileTitle = "查看附件";
            this.isDown = true;
          }
        }
      });
    },
    getprocessConfirmList() {
      let params = {
        d: {
          c: [
            { key: "userId", value: localStorage.getItem("userId") },
            { key: "authToken", value: localStorage.getItem("authToken") },
          ],
          filters: [
            {
              field: "dataId",
              operator: "EQUALS",
              value: this.getid,
            },
          ],
        },
      };
      processConfirmList(params).then((res) => {
        this.stepsList = res.data.result;
        let nextGroup = this.detailData.nextGroup;
        // let nextLevel = this.detailData[nextLevel];
        let otempObj = this.stepsList[nextGroup];
        console.log("this.stepsList[nextGroup]", this.stepsList[nextGroup]);
        let userId = this.userId;
        this.dataID = this.stepsList[1][0].dataId; //审批流程的dataId

        for (let a in otempObj) {
          if (
            userId === otempObj[a].approvalUserId &&
            otempObj[a].approvalStatus === 0
          ) {
            this.isComfBtn = true;
            this.objId = otempObj[a].id;
          }
        }
      });
    },
    viewImg(a, b, index) {
      // ImagePreview({
      //   images: this.otmpImgArr,
      //   startPosition: index,
      // });
    },
    /**
     * Base64字符串转二进制流
     *
     */
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      console.log(mime, "mimemime");
      return new Blob([u8arr], {
        type: mime,
      });
    },
    // 审批流程确定
    process() {
      let params = {
        d: {
          c: [
            {
              key: "userId",
              value: this.userId,
            },
            {
              key: "authToken",
              value: this.authToken,
            },
            // {
            //   key: "entSpaceId",
            //   value: sessionStorage.getItem("eID"),
            // },
          ],
        },
        obj: {
          approvalComments: this.radio2, //意见的参数
          id: this.objId, //审批流程的id
          qianzidz: this.imgurl,
        },
      };
      if (this.objId == "") {
        // this.$toast.fail("您已经提交了,不能在提交");
      } else {
        processConfirm(params, this.dataID).then((res) => {
          JSbridge.callHandler("gotoBack", "1", (res) => {
            return res;
          });
          this.$toast.success("成功提交");
          this.isComfBtn = false;
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.Big-box {
  background-color: #f3f4f8;

  .van-cell-group {
    margin: 0.1rem 0;
  }
  .van-field__label {
    width: 4em;
  }
  .radioclass {
    margin: 0.05rem 0;
  }
  .determine {
    flex-direction: column;
  }
  .vantbutton {
    margin: 0.1rem 0;
  }
  .a {
    color: #969799;
  }

  .b {
    color: #07c160;
    /deep/ .van-radio__label--disabled {
      color: #07c160;
    }
  }
}
</style>

